<template>
  <div class="contract">
    <el-scrollbar style="flex: 1;">
      <div class="contract-content">
        <div
          v-for="(item, i) in contractData"
          :key="i"
          :class="[`contract-content__item is-${item.state}`]">
            <div class="contract-content__item--block contract-content__item--label">{{ item.label }}</div>
            <!-- 线上签署 -->
            <template v-if="signType">
              <div class="contract-content__item--block contract-content__item--mark">签署方</div>
              <div class="contract-content__item--name">XXX有限公司</div>
            </template>
            <!-- 线下签署 -->
            <el-text
              v-else
              type="warning"
              class="contract-content__item--down"
              @click=""
            >合同下载</el-text>
            <div class="contract-content__item--square">
              <img src="@/assets/images/u35.png"/>
            </div>
            <div class="contract-content__item--block contract-content__item--progress">
              <template v-if="signType">
                <div v-if="item.state=='wait'">点击签署</div>
                <template v-else>{{ item.state=='success' ? '签署完成' : '签署中' }}</template>
              </template>
              <template v-else>
                <c-upload v-if="item.state=='wait'">上传</c-upload>
                <template v-else>已上传</template>
              </template>
            </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="contract-document">
      <el-button type="primary" class="contract-document__but">新增/变更反担保人</el-button>
      <div class="contract-document__content">
        <div class="common-left-title">法律文本（加盖公章）上传</div>
        <div class="contract-document__block">出具分离式保函承诺书模板下载</div>
        <el-table
          :data="tableData"
          border size="small"
          style="width: 500px;">
          <el-table-column label="文件名称" prop="label" width="200" />
          <el-table-column label="证明材料">
            <template #default="{ row }">
              <div class="table-evidence">
                <el-text type="warning">XXXXX.pdf/png/jpg</el-text>
                <el-icon class="iconfont icon-shangchuanwenjian" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary" class="contract-document__comfirm">缴费信息确认</el-button>
    </div>
  </div>
</template>

<script setup>
// 签署 线上-true/线下-false
const signType = ref(true)

const contractData = reactive([
  {
    label: '委托开立保函合同',
    state: 'process',
  },
  {
    label: '反担保保证合同',
    state: 'success',
  },
  {
    label: '反担保保证合同',
    state: 'wait',
  }
])


const tableData = reactive([
  { label: '中标通知书' },
  { label: '施工合同'  },
  { label: '出具分离式保函承诺书' },
  { label: '申请企业营业执照' },
  { label: '法人身份证扫描件' },
  { label: '资质证书' },
])
</script>

<style lang="scss" scoped>
.contract{
  display: flex;
  &-content{
    flex: 1;
    display: flex;
    &__item{
      display: flex;
      flex-direction: column;
      align-items: center;
      --color-type: var(--el-color-primary);
      & + &{
        margin-left: 50px;
      }
      // 进行中
      &.is-process{
        --color-type: #5F6FC4;
      }
      // 完成
      &.is-success{
        --color-type: #259157;
      }
      &--block{
        border-radius: 6px;
        background-color: var(--color-type);
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
      }
      &--label{
        width: 270px;
        height: 56px;
        color: #F9F9F9;
        font-weight: 700;
        font-size: 25px;
      }
      &--mark{
        width: 110px;
        height: 34px;
        color: #FDFDFD;
        font-size: 18px;
      }
      &--name{
        font-size: 16px;
        color: var(--color-type);
      }
      &--down{
        color: #00AEF9;
        cursor: pointer;
      }
      &--square{
        width: 300px;
        height: 450px;
        margin: 0 20px;
        border: 4px solid var(--color-type);
        overflow: hidden auto;
        box-sizing: border-box;
        letter-spacing: normal;
        text-transform: none;
        text-align: center;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
        margin: 10px 0;
        img{
          width: 100%;
        }
      }
      &--progress{
        width: 180px;
        height: 50px;
        color: #FDFDFD;
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
  &-document{
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &__but{
      width: 380px;
      height: 50px;
      font-size: 20px;
    }
    &__comfirm{
      width: 280px;
      height: 80px;
      font-weight: 700;
      font-size: 28px;
      border-radius: 15px;
    }
    &__content{
      margin: 50px 0;
    }
    &__block{
      height: 36px;
      font-size: 16px;
      color: #FDFDFD;
      border-radius: 6px;
      background-color: var(--el-color-primary);
      display: inline-flex;
      align-items: center;
      padding: 0 20px;
      margin: 20px 0 20px 12px;
    }
  }
}

.table-evidence{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  :deep(.el-text){
    flex: 1;
    text-align: center;
    margin: 0 10px;
  }
  :deep(.el-icon){
    cursor: pointer;
    font-size: 20px;
    color: #B7482E;
  }
}
</style>
